<script setup>
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// ------------------------------用户搜索
const formInline = reactive({
    userId: '',
    username: '',
    nickname: '',
    regst: 'all',
    reg: 'all',
    hot: 'all',
    dis: 'all',
    sup: 'all',
    dic: 'all',
    regTime: ''
})

const onSubmit = () => {
    console.log('submit!')
}
// ------------------------------用户数据
let users = reactive([
    {
        id: 40006, username: '17765003268', nickname: '管理员A', 
        avatar: '@/assets/tx01.jpg', phone: '17765003268',
        balance: 51, cumCon: 0, ticket: 0.00, cumTicket: 0,
        invitation: '1MAZ0L', regDevice: 'android',
        regTime: '2024-08-25 12:27:56',
        lastLogin: '2024-08-25 12:28:32',
        lastIp: '123.168.132.198',
        status: 0
    },
    {
        id: 40005, username: '18699008877', nickname: '管理员B', avatar: '../assets/tx02.jpg', phone: '',
        balance: 50, cumCon: 0, ticket: 0.00, cumTicket: 0,
        invitation: '2CE0F8', regDevice: 'android',
        regTime: '2024-08-26 10:08:02',
        lastLogin: '2024-08-26 12:30:12',
        lastIp: '223.104.205.215',
        status: 1
    }
])

// ------------------------ 分页

const currentPage = ref(1)
const pageSize = ref(100)
const size = ref('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}

// ---------------------- 删除用户操作
// 弹出二次确认对话框：参数user就是要删除的用户：
function showConfirm(user) {
    ElMessageBox.confirm(
    '确定要删除 ' + user.username +' 用户吗?',
    '警告信息',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      // 调用删除函数：删除用户
      deleteUser(user)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '管理员取消了删除操作',
      })
    })
    
}

// 删除用户的函数：参数user就是要删除的用户
function deleteUser(user) {
    // 查询用户在数组中的索引
    let index = users.findIndex(item => item.id === user.id)
    // 删除用户数据
    users.splice(index, 1)
    // 提示删除成功
    ElMessage({
        type: 'success',
        message: '管理员成功删除了用户 ' + user.username,
      })
}

// ------------------ 新增用户操作 
import DialogUserCreate from '../../components/DialogUserCreate.vue'
// 声明变量控制弹窗显示/隐藏
let userDialogCreate = ref(false)
// 准备函数：显示对话框
function showCreateDialog() {
    userDialogCreate.value = true
}
// 准备函数：隐藏对话框
function hideCreateDialog() {
    userDialogCreate.value = false
}
// 新增用户数据：参数user就是子组件告诉父组件要新增的用户
function createUser(user) {
    // 计算新用户的id
    let id = users[0].id + 1
    // 复制一份用户数据
    let newUser = {...user}
    // 给新数据添加id属性
    newUser.id = id
    // 新增用户
    users.unshift(newUser)
}


</script>
<template>
    <div class="p-header">
        <h2>管理员管理</h2>
        <el-button type="primary" @click="showCreateDialog">新增用户</el-button>
    </div>
    <!-- 新增用户弹窗 -->
    <DialogUserCreate :dialogFormVisible="userDialogCreate"
        @createUserEvent="createUser"
        @closeCreateEvent="hideCreateDialog"></DialogUserCreate>

    <el-divider>用户信息搜索</el-divider>
    <el-card>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="僵尸粉开关">
                <el-select v-model="formInline.regst" placeholder="please select your zone">
                    <el-option label="全部" value="all" />
                    <el-option label="打开" value="open" />
                    <el-option label="关闭" value="close" />
                </el-select>
            </el-form-item>
            <el-form-item label="僵尸粉">
                <el-select v-model="formInline.reg" placeholder="please select your zone">
                    <el-option label="全部" value="all" />
                    <el-option label="是" value="open" />
                    <el-option label="否" value="close" />
                </el-select>
            </el-form-item>
            <el-form-item label="禁用">
                <el-select v-model="formInline.dis" placeholder="please select your zone">
                    <el-option label="全部" value="all" />
                    <el-option label="打开" value="open" />
                    <el-option label="关闭" value="close" />
                </el-select>
            </el-form-item>
            <el-form-item label="热门">
                <el-select v-model="formInline.hot" placeholder="please select your zone">
                    <el-option label="全部" value="all" />
                    <el-option label="打开" value="open" />
                    <el-option label="关闭" value="close" />
                </el-select>
            </el-form-item>
            <el-form-item label="超管">
                <el-select v-model="formInline.sup" placeholder="please select your zone">
                    <el-option label="全部" value="all" />
                    <el-option label="超管" value="open" />
                </el-select>
            </el-form-item>
            <el-form-item label="设备来源">
                <el-select v-model="formInline.dic" placeholder="please select your zone">
                    <el-option label="全部" value="all" />
                    <el-option label="android" value="open" />
                    <el-option label="ios" value="close" />
                </el-select>
            </el-form-item>
            <el-form-item label="提交时间">
                <el-date-picker
                    v-model="formInline.regTime"
                    type="daterange"
                    range-separator="To"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                />
            </el-form-item>
            <el-form-item label="ID：">
                <el-input v-model="formInline.userId" placeholder="请输入用户ID" clearable />
            </el-form-item>
            <el-form-item label="账号：">
                <el-input v-model="formInline.username" placeholder="请输入用户账号" clearable />
            </el-form-item>
            <el-form-item label="昵称：">
                <el-input v-model="formInline.nickname" placeholder="请输入用户昵称" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <el-divider>用户信息展示</el-divider>
    <el-table :data="users" style="width: 100%">
        <el-table-column label="ID" prop="id" width="80"/>
        <el-table-column label="账号" prop="username" width="180"/>
        <el-table-column label="昵称" prop="nickname" width="150"/>
        <el-table-column label="头像" prop="avator" width="100">
            <template #default="{ row }">
                <el-avatar :src="row.avatar" :size="35"/>
            </template>
        </el-table-column>
        <el-table-column label="手机" prop="phone" width="120"/>
        <el-table-column label="余额" prop="balance" width="100"/>
        <el-table-column label="累计消费" prop="cumCon" width="100"/>
        <el-table-column label="映票" prop="ticket" width="100"/>
        <el-table-column label="累计映票" prop="cumTicket" width="100"/>
        <el-table-column label="邀请码" prop="invitation" width="120"/>
        <el-table-column label="注册设备" prop="regDevice" width="100"/>
        <el-table-column label="注册时间" prop="regTime" width="220"/>
        <el-table-column label="最后登录时间" prop="lastLogin" width="220"/>
        <el-table-column label="最后登录IP" prop="lastIp" width="200"/>
        <el-table-column label="状态" prop="invitation">
            <template #default="{ row }">
                <el-tag type="primary" v-if="row.status==0">正常</el-tag>
                <el-tag type="danger" v-else-if="row.status==1">锁定</el-tag>
            </template>
        </el-table-column>
        <!-- {
        id: 40006, username: 'wx_17765007861', nickname: 'Eluck', avator: '', phone: '',
        balance: 50, cumCon: 0, ticket: 0.00, cumTicket: 0,
        invitation: '2CE0F8', regDevice: 'android',
        regTime: '2024-08-26 10:08:02',
        lastLogin: '2024-08-26 12:30:12',
        lastIp: '223.104.205.215',
        status: 0
    } -->
        <el-table-column align="right" fixed="right" width="220">
            <template #default="scope">
                <el-button-group>
                    <el-button type="warning" size="small">拉黑</el-button>
                    <el-button type="warning" size="small">禁用</el-button>
                </el-button-group>
                <el-button-group>
                    <el-button type="primary" size="small">设置超管</el-button>
                    <el-button type="primary" size="small">取消热门</el-button>
                    <el-button type="primary" size="small">推荐</el-button>
                </el-button-group>
                <el-button-group>
                    <el-button type="primary" size="small">开启僵尸粉</el-button>
                    <el-button type="primary" size="small">设置僵尸粉</el-button>
                </el-button-group>
                <el-button-group>
                    <el-button type="success" size="small">编辑</el-button>
                    <el-button type="danger" size="small" @click="showConfirm(scope.row)">删除</el-button>
                </el-button-group>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
      background
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[100, 200, 300, 400]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
</template>
<style scoped>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 100px;
    font-size: 14px;
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

.el-pagination{
    margin-top:20px;
}

.p-header{
    display:flex;
    justify-content: space-between;
}
</style>